<template>
  <div class="contanier">
      <mt-header  title="用户注册"></mt-header>
      <div class="main">
          <div class="main-box">
              <mt-cell title="电话号:" icon="more" value="带 icon">
                  <img slot="icon" src="../../../static/img/dianhua.png" width="20" height="20">    
                  <input v-model="userInfo.phone" type="text" placeholder="请输入电话号码">
                  <mt-button @click="sendCode" type="primary" size='small'>发送验证码</mt-button>
              </mt-cell>
              <mt-cell title="短信验证码:" icon="more" value="带 icon">
                  <img slot="icon" src="../../../static/img/message.png" width="20" height="20">    
                  <input v-model="userInfo.code" type="text" placeholder="请输入验证码">
                  <i @click="clearText('code')" v-if="userInfo.code.length > 0"  class="clear-img mintui mintui-field-error"></i>
              </mt-cell>
              <mt-cell title="密码:" icon="more" value="带 icon">
                  <img slot="icon" src="../../../static/img/close-eye.png" width="20" height="20">    
                  <input v-model="userInfo.pass" type="password" placeholder="请输入密码">
                  <i @click="clearText('pass')" v-if="userInfo.pass.length > 0"  class="clear-img mintui mintui-field-error"></i>
              </mt-cell>
              <mt-cell title="确认密码:" icon="more" value="带 icon">
                  <img slot="icon" src="../../../static/img/close-eye.png" width="20" height="20">    
                  <input v-model="userInfo.confirmPass" type="password" >
                  <i @click="clearText('confirmPass')" v-if="userInfo.confirmPass.length > 0"  class="clear-img mintui mintui-field-error"></i>
              </mt-cell>
              <mt-button @click="commitInfo" class="commit-btn" type="primary">立即注册</mt-button>
          </div>
      </div>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
import { Toast } from 'mint-ui';
export default {
    data(){
        return {
            userInfo:{
                phone:'',
                code:'',
                pass:'',
                confirmPass:''
            }
        }
    },
    methods:{
        clearText(key){
           this.userInfo[key] = ''
        },
        commitInfo(){
            let {phone,code,pass,confirmPass} = this.userInfo
            if (!/^1[0-9]{10}$/.test(phone)) {
                MessageBox('','请输入正确的手机号')
                return
            }
            if (!code ) {
                MessageBox('','验证码不能为空')
                return
            }
            if (pass !== confirmPass) {
                MessageBox('','密码不一致')
                return
            }
            Toast('注册成功')
            this.$router.push('/')
        },
        sendCode(){
            let { phone} = this.userInfo
            if (!/^1[0-9]{10}$/.test(phone) || (  phone.length !== 11  ) ) {
                MessageBox('','请输入正确的手机号')
                return
            }
            MessageBox.alert('发送成功')
            .then(value =>{
                this.userInfo.code = '123456'
            })
        }
    }
}
</script>

<style scoped>
.contanier{
    height: 100vh;
    background: #bfa;
}
.mint-header >>> .mint-header-title{
    font-size: 20px;
}
.main-box{
    padding: 0px 15px;
    margin: 100px 0px;
}
.mint-cell >>> .mint-cell-wrapper{
    padding: 0px;
}
.main-box >>> .mint-cell-title{
    display: flex;
    margin-left: 15px;
}
.main-box >>> .mint-cell-title img{
    margin-right: 10px;
}
input{
    margin-right: 20px;
    width: 120px;
    border: 1px solid white;
}
.clear-img{
    margin-right: 10px;
}
.commit-btn{
    margin-top: 20px;
    width: 100%;
}
</style>